<%@ page contentType="text/html;charset=utf-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="icon" type="image/x-icon" href="${pageContext.request.contextPath}/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/xadmin.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/zsa-common.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/back/lib/layui/layui.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/back/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<%--<div class="x-nav">--%>
<%--&lt;%&ndash;<span class="layui-breadcrumb">&ndash;%&gt;--%>
<%--&lt;%&ndash;<a href="">首页</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;<a href="">演示</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;<a>&ndash;%&gt;--%>
<%--&lt;%&ndash;<cite>导航元素</cite></a>&ndash;%&gt;--%>
<%--&lt;%&ndash;</span>&ndash;%&gt;--%>
<%--<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"--%>
<%--href="javascript:location.replace(location.href);" title="刷新">--%>
<%--<i class="layui-icon" style="line-height:30px">&#xe669;</i></a>--%>
<%--</div>--%>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <%--<input type="text" name="name" placeholder="姓名" autocomplete="off" class="layui-input">--%>
            <%--<input type="text" name="phone" placeholder="手机号" autocomplete="off" class="layui-input">--%>
            <%--<input type="text" name="idcard" placeholder="身份证号码" autocomplete="off" class="layui-input">--%>
            <%--<div class="layui-input-inline zsa-select">--%>
            <%--<select name="resAttr1">--%>
            <%--<option value="">--性别--</option>--%>
            <%--<option value="男">男</option>--%>
            <%--<option value="女">女</option>--%>
            <%--</select>--%>
            <%--</div>--%>
            <%--<div class="layui-input-inline zsa-select">--%>
            <%--<select name="status">--%>
            <%--<option value="">--状态--</option>--%>
            <%--<option value="1">正常</option>--%>
            <%--<option value="2">待审核</option>--%>
            <%--<option value="0">无效</option>--%>
            <%--</select>--%>
            <%--</div>--%>
            <%--<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>--%>
        </form>
    </div>
    <table id="cols-table" lay-filter="cols-table" class="layui-hide zsa-auto-height"></table>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="regenerate"><i
                    class="layui-icon">&#xe702;</i>重新生成
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon" style="line-height:30px">&#xe654;</i>添加字段
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon" style="line-height:30px">&#xe669;</i>
            </button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑&nbsp;</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i
                class="layui-icon">&#xe640;</i>删除&nbsp;</a>
    </script>

    <script type="text/html" id="checkIdCard">
        <div>
            <img src="" width="100%">
        </div>
    </script>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/httptTools.js"
        charset="utf-8"></script>
<jsp:include page="/WEB-INF/page/layui_version.jsp"></jsp:include>

<script>
    $('body').on("contextmenu mousedown", 'img', function (e) {
        e.preventDefault();
        return false;
    });
    layui.use(['table', 'form', 'lutil'], function () {
        var table = layui.table,
            layer = layui.layer,
            form = layui.form,
            lutil = layui.lutil,
            height = $(window).height() - $('.x-body .layui-row').outerHeight() - 50,
            height_value = height > 300 ? parseInt(height) : 300;
        var wait = false,
            reg_lay_filter = /lay-filter="(.*?)"|lay-filter ="(.*?)"|lay-filter= "(.*?)"|lay-filter = "(.*?)"/,
            reg_zsa_val_format = /zsa-val-format="(.*?)"|zsa-val-format ="(.*?)"|zsa-val-format= "(.*?)"|zsa-val-format = "(.*?)"/,
            table_classs = [], getTable = function (id) {
                var that_table;
                $.each(table_classs, function (i, e) {
                    if (e.config.id == id || e.config.index == id) return that_table = e, false;
                });
                return that_table;
            };

        table_classs.push(table.render({
            elem: '#cols-table',
            url: '${pageContext.request.contextPath}/back/page_config/cols_list.do',
            method: 'POST',
            height: height_value,
            toolbar: '#toolbarDemo',
            title: '页面列表',
            page: true,
            limit: 10,
            limits: [5, 10, 20, 30, 50],
            text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            headers: {'${_csrf.headerName}': '${_csrf.token}'},
            even: true,
            where: {tableId: '${tableId}'},
            initSort: {
                field: 'sort'
                , type: 'asc'
            },
            request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            response: {
                // statusName: 'success' //数据状态的字段名称，默认：code 加上有问题
                statusCode: 0 //成功的状态码，默认：0
                , msgName: 'message' //状态信息的字段名称，默认：msg
                , countName: 'total' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            },
            cols: [[//标题栏
                {type: 'checkbox', fixed: 'left'},
                {field: 'field', title: '字段名', event: 'row-click', fixed: 'left', width: 120},
                {field: 'title', title: '标题名', align: 'center', event: 'row-click', fixed: 'left', width: 120},
                {field: 'width', title: '列宽', align: 'center', event: 'row-click', width: 100},
                {field: 'minWidth', title: '最小宽度', event: 'row-click', width: 100},
                {field: 'type', title: '字段类型', align: 'center', event: 'row-click', width: 100},
                {field: 'fixed', title: '固定列', align: 'center', event: 'row-click', width: 80},
                {
                    field: 'hide', title: '默认隐藏', align: 'center', event: 'row-click', width: 80,
                    templet: function (d) {
                        return '<input type="checkbox" name="hide" lay-filter="field_hide" value="' + d.id + '" lay-skin="switch" lay-text="是|否" ' + (d.hide == 'true' ? 'checked>' : '>');
                    }
                },
                {
                    field: 'totalRow', title: '合计', align: 'center', event: 'row-click', width: 80,
                    templet: function (d) {
                        return '<input type="checkbox" name="totalRow" lay-filter="field_totalRow" value="' + d.id + '" lay-skin="switch" lay-text="是|否" ' + (d.totalRow == 'true' ? 'checked>' : '>');
                    }
                },
                {
                    field: 'disSort', event: 'row-click', align: 'center', title: '排序', width: 80,
                    templet: function (d) {
                        return '<input type="checkbox" name="disSort" lay-filter="field_disSort" value="' + d.id + '" lay-skin="switch" lay-text="是|否" ' + (d.disSort == 'true' ? 'checked>' : '>');
                    }
                },
                {
                    field: 'unresize', event: 'row-click', align: 'center', title: '禁止拖放', minWidth: 80,
                    templet: function (d) {
                        return '<input type="checkbox" name="unresize" lay-filter="field_unresize" value="' + d.id + '" lay-skin="switch" lay-text="是|否" ' + (d.unresize == 'true' ? 'checked>' : '>');
                    }
                },
                {field: 'style', event: 'row-click', title: '样式', minWidth: 150},
                {field: 'align', event: 'row-click', title: '文字排列', width: 80},
                {field: 'clospan', event: 'row-click', title: '所占列数', width: 80},
                {field: 'rowspan', event: 'row-click', title: '所占行数', width: 80},
                {field: 'templet', event: 'row-click', title: '列模板', minWidth: 150},
                {field: 'toolbar', event: 'row-click', title: '操作条', minWidth: 150},
                {field: 'fieldType', event: 'row-click', title: '数据类型', width: 80},
                {field: 'sort', sort: true, align: 'center', title: '列顺序', fixed: 'right', minWidth: 85},
                {
                    field: 'dataField', title: '数据列', align: 'center', event: 'row-click', fixed: 'right', width: 80,
                    templet: function (d) {
                        return '<input type="checkbox" name="dataField" lay-filter="field_dataField" value="' + d.id + '" lay-skin="switch" lay-text="是|否" ' + (d.dataField == 'true' ? 'checked>' : '>');
                    }
                },
                {
                    field: 'state',
                    event: 'row-click',
                    title: '状态',
                    width: 90,
                    sort: true,
                    fixed: 'right',
                    align: 'center',
                    templet: function (d) {
                        return '<input type="checkbox" name="state" lay-filter="field_state" zsa-val-format="[1,0]" value="' + d.id + '" lay-skin="switch" lay-text="有效|无效" ' + (d.state == '1' ? 'checked>' : '>');
                    }
                },
                {
                    field: 'cz',
                    title: '操作',
                    width: 150,
                    toolbar: "#barDemo",
                    fixed: 'right',
                    align: 'center'
                }
            ]]
        }));
        //头工具栏事件
        table.on('toolbar(cols-table)', function (obj) {
            var thisTable = getTable('cols-table');
            var checks = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'refresh':
                    thisTable && thisTable.refresh();
                    break;
                case 'add':
                    lutil.open_iframe('添加字段', '${pageContext.request.contextPath}/back/page_config/cols.view?tableId=${tableId}', null, null, function () {
                        thisTable && thisTable.refresh();
                    });
                    break;
                case 'regenerate':
                    lutil.my_confirm("警告", "重新生成字段可能会覆盖当前设置（请慎用）?", function () {
                        var loding = layer.load(2, {shade: [0.3, '#eee']});
                        ajaxRequestByCsrf("${pageContext.request.contextPath}/back/page_config/cols_regenerate.do", {tableId: '${tableId}'}, function (res) {
                            lutil.success_msg(res.message);
                            thisTable && thisTable.refresh();
                        }, null, function (res) {
                            layer.close(loding);
                        });
                    });
                    break;
            }
        });

        table.on('sort(cols-table)', function (obj) {
            // table.reload('user-table', {
            //     initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
            //     , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            //         field: obj.field //排序字段
            //         , order: obj.type //排序方式
            //     }
            // });
            var thisTable = getTable('cols-table');
            thisTable && thisTable.sort(obj);
        });

        table.on('tool(cols-table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var thisTable = getTable('cols-table');
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent == 'del') {
                lutil.my_confirm("警告", "删除的数据不可恢复,确定要删除?", function () {
                    var loding = layer.load(2, {shade: [0.3, '#eee']});
                    ajaxRequestByCsrf("${pageContext.request.contextPath}/back/page_config/cols_del.do", {ids: data.id}, function (res) {
                        lutil.success_msg(res.message);
                        thisTable && thisTable.refresh();
                    }, null, function (res) {
                        layer.close(loding);
                    });
                })
            }
            if (layEvent == 'edit') {
                lutil.open_iframe('编辑字段', '${pageContext.request.contextPath}/back/page_config/cols.view?colsId=' + data.id, null, null, function () {
                    thisTable && thisTable.refresh();
                });
            }
        });

        $.each(table_classs, function (i, e) {
            var tableId = e.config.id || e.config.index;
            $.each(e.config.cols[0], function (i, e) {
                if (e.templet) {
                    var templetv = e.templet.toString(), filter, format;
                    if (templetv.indexOf('<input') > 0 && templetv.indexOf('"checkbox"') > 0) {
                        filter = templetv.match(reg_lay_filter), format = templetv.match(reg_zsa_val_format),
                        filter && form.on('switch(' + filter[1] + ')', function (obj) {
                            updateDate(getTable(tableId), obj, format ? JSON.parse(format[1]) : null);
                        });
                    }
                }
            })
        });


        function updateDate(thisTable, obj, format) {
            var loding = layer.load(2, {shade: [0.3, '#eee']});
            var url = '${pageContext.request.contextPath }/back/page_config/cols_save.do',
                params = {id: obj.value};
            params[$(obj.elem).attr('name')] = format ? (format[obj.elem.checked ? 0 : 1]) : (obj.elem.checked);
            var completeFunc = function () {
                layer.close(loding);
                thisTable && thisTable.refresh();
            };
            ajaxRequestByCsrf(url, params, null, null, completeFunc)
        }

        form.on('submit(sreach)', function (data) {
            // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            // table.reload('user-table', {
            //     where: data.field
            // })
            var thisTable = getTable('cols-table');
            thisTable && thisTable.query(data.field);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        $(window).resize(function () {
            height = $(window).height() - $('.x-body .layui-row').outerHeight() - 50;
            height_value = height > 300 ? parseInt(height) : 300;
            if (!wait) {
                wait = true;
                setTimeout(function () {
                    wait = false
                }, 3000);
                $.each(table_classs, function (i, e) {
                    e.config.elem.hasClass('zsa-auto-height') && e.reload({height: height_value});
                });
            }
        });
    })
    ;
</script>
</body>

</html>
